<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="portfolio_single.css">
</head>
<body>
	<!-- top导航 -->
	<div class="top-bar">
		<span class="modus">MODUS</span>VERSUS
	
		<ul>
		<li><button class="search"></button></li>
		<li><a  class="top-bar-a" href="#">CONTACTS</a></li>
		<li><a class="top-bar-a"  href="#">FEATURES</a></li>
		<li><a class="top-bar-a"  href="#">BLOG</a></li>
		<li><a id="top_bar_a" class="top-bar-a" href="#" onmouseover=showDiv() onmouseout=showdown()>∨ PORTFOLIO</a>
		<div class="show-div" id="showButton">
			<a href="#">Portfolio 2 column page</a>
			<a href="#">Portfolio 2 column page</a>
			<a href="#">Portfolio 2 column page</a>
		</div>
		</li>
		<li><a  class="top-bar-a" href="#">SERVICES</a></li>
		<li><a  class="top-bar-a" href="#">ABOUT</a></li>
		<li class="home"><a href="#" >HOME</a></li>
		</ul>
		<div class="path-index"></div>
	</div>

<!-- 文字部分 -->
<div class="about-us">
	<h2>PORTFOLIO</h2>
	<p><span>Home </span>  /  <span>Blog</span>     /   <span>portfolio</span> </p>	
</div>
<!-- content -->
<div style="width: 100%;height: 1400px;background: #F3F3F3;">
<div class="big-div" style="width: 80%;height: 1400px;background: #F3F3F3;">

			<!-- toubu -->
	<div class="dfuc"><h2>Donec faucibus ultricies congue</h2><div class="bu-is"><i><</i><i>></i></div></div>
			<!-- 图片展现 -->
	<div id="container">
		<div id="imglist">
			<div class="slidpic" style="display: none; opacity: 0;">
				<a href="#"><img src="img/001.jpg" width="100%" height="500px"></a>	
			</div>
			<div class="slidpic" style="display: block; opacity: 1;">
				<a href="#"><img src="img/002.jpg" width="100%" height="500px"></a>
			</div>
			<div class="slidpic" style="display: none; opacity: 0;">
				<a href="#"><img src="img/003.jpg" width="100%" height="500px"></a>
			</div>		
		</div>
		<div id="buttons">
			<i id="prev">&lt;&lt;</i>
			<i id="next">&gt;&gt;</i>
		</div>
			
		</div>
        <ul id="slidot">
			<li class=""></li>
			<li class="on"></li>
			<li class=""></li>
		</ul>
		
	<div class="ppro">
		<div class="ppro-left">
			<h2>PORWDMSCMKDIF</h2>
			<p>Msdidn cncn sdn cn ksncaoj nbjksajcosaijcnasifsa idjsaic sna jkcdiodfj nksjsaoicsaks</p>
			<p>Duis dapibus aliquam mi, eget euismod sem scelerisque ut. Vivamus at elit quis urna adipiscing iaculis. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Eget euismod sem scelerisque ut. Vivamus at elit quis urna adipiscing iaculis. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</div>

		<div class="ppro-right">
			<h2>PORTFOLIO</h2>
			<div><span>Pndsdnknsd</span><span>26,May,2013</span></div>
			<div><span>Pndsdnknsd</span><span>26,May,2013</span></div>
			<div><span>Pndsdnknsd</span><span>26,May,2013</span></div>
			<div><span>Pndsdnknsd</span><span>26,May,2013</span></div>
		</div>
	</div>
	
	<div class="ohc">
	<div>
		<h2>Our Happy Clients</h2><img src="img/zhixian.png" class="zhixian"></div>
		<div id="buttons01">
				
				<i id="next01"><img src="img/right.png" width="15px"></i>
				<i id="prev01"><img src="img/left.png" width="15px"></i>
		</div>	
	</div>
	
	<div class="pics">
		<div><p><img src="img/eyes.png"><img src="img/gmail.png"></p>
		<span>Learn ipdnfdf</span></div>
		<div><p><img src="img/eyes.png"><img src="img/gmail.png"></p>
		<span>Learn ipdnfdf</span></div>
		<div><p><img src="img/eyes.png"><img src="img/gmail.png"></p>
		<span>Learn ipdnfdf</span></div>
		<div><p><img src="img/eyes.png"><img src="img/gmail.png"></p>
		<span>Learn ipdnfdf</span></div>
	</div>
</div>
</div>
<!-- 尾部 -->
<div class="foot">
	
	<div class="path003"></div>

	<div class="foot-cont">
			<div class="fo-co-left">
				<p><span class="modu">MODUS</span><span class="vers">VERSUS</span></p>
				<p class="mo-ver">djs fdsj fjsjbfjd sqw cifdhl sdw9jf sjsdf sjd fdpocn isdqdpos dfa fed0wjds vmnsdf sdkjosf csfei cj jwd of askdsnc e jdwsf jskfwqsa vjdfjqaxs kjsdfj </p>
				<div class="fon-sty"><p>Phone:<span>182 5648 4545</span></p>
				<p>
					e-mail:<span>info@modu.versus</span>
				</p></div>
			</div>
			<div class="fo-co-center1"><h2>Company</h2>
			<a href="#">> About</a>
			<a href="#">> FAQ</a>
			<a href="#">> Contact</a>
			<a href="#">> Terrrs</a>
			<a href="#">> Privacy</a>
			<a href="#">> Testmonials</a></div>
			<div class="fo-co-center2"><h2>Community</h2>
			<a href="#">> Blog</a>
			<a href="#">> Forum</a>
			<a href="#">> Support</a>
			<a href="#">> Newsletter</a></div>
			<div class="fo-co-right">
				<p class="from-the"><span>from the </span>BLOG</p>
				<div class="img"><img src="img/img.png"><span>sdjf dfjf osdfj sodfxcm jf mclkds mvkd</span><h6>26 May,2013</h6></div>
				<div class="img"><img src="img/img.png"><span>d vkfdjf odsf dfj vce9 vcdikvdf vdk dkf kp</span><h6>26 May,2013</h6></div>
			</div>	
	</div>
	<div class="footer">
		<p>2013 ModusVersus</p>
		<div><a href="#"><img src="img/face.png"></a>
		<a href="#"><img src="img/google.png"></a>
		<a href="#"><img src="img/ytube.png"></a>
		<a href="#"><img src="img/wifi.png"></a></div>
	</div>
</div>
<script type="text/javascript" src="portfolio_single.js"></script>
</body>
</html>